Part5 - ROS Web interface with vue
ROS2 Web interface using roslibjs and vue3
Table of Content
Bridge#
run node
ros2 launch rosbridge_server rosbridge_websocket_launch.xml
Web#
- index.html: load libraries and HTML template
- app.js: Create vue app and init roslib connection
index.html
<html>
<head>
<meta charset="utf-8" />
<script src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script src="https://unpkg.com/vue@3.0.2"></script>
</head>
<body>
<h1>Simple ROS User Interface</h1>
<div id="app">
<p>ros status: {{status}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
const app = Vue.createApp({
data() {
return {
status: "---",
param: 0
}
},
mounted() {
this.ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
},
})
vm = app.mount('#app')
vm.ros.on('connection', () => {
vm.status = "--connected--";
});
Parameter#
declared
var my_param = new ROSLIB.Param({
ros: vm.ros,
name: '/node:param_name'
});
get / set
//Get
my_param.get(function (value) {
if (value != null) {
console.log(value);
}
});
//Set
my_param.set(5)